<template>
	<view class="container">
		<view class="agent">
			<view class="agent-top">
				<div class="blance">
					<div class="account-price">
						<div class="price-t">
							<p>账户余额(元)</p>
							<image src="/static/img/agent/yanjing.png" @click="isShowBlance = !isShowBlance" mode=""></image>
						</div>
						<div class="price-b">
							<p v-if="isShowBlance">******</p>
							<p v-else>{{dataFrom.money}}</p>
						</div>
					</div>
				</div>
				<div class="caozuo">
					<div class="liushui" @click="navTo('/pages/agent/user/record_money')">
						<p>流水明细</p>
						<image src="/static/img/agent/jiantou.png" mode=""></image>
					</div>
					<div class="yuer" @click="navTo('/pages/agent/user/cash')">
						<p>余额提现</p>
						<image src="/static/img/agent/jiantou.png" mode=""></image>
					</div>
				</div>
				<div class="shouru">
					<div class="sritem" @click="navTo('/pages/agent/user/record_money?type=today')">
						<p>
							{{ dataFrom.day>0?('+'+dataFrom.day):(dataFrom.day)}}
						</p>
						<span>今日收益(元)</span>
					</div>
					<div class="sritem" @click="navTo('/pages/agent/user/orderList?type=today')">
						<p>{{dataFrom.day_num}}</p>
						<span>今日订单(笔)</span>
					</div>
					<div class="sritem">
						<p>{{dataFrom.refund_sum}}</p>
						<span>今日退款(元)</span>
					</div>
				</div>
			</view>
			
			<view class="info">
				<div class="index-title" style="margin-left: 5px;">
					<span></span>
					<p>我的场地</p>
				</div>
				<div class="infoitem" v-if="roles !== 'staff' && roles !== 'shop'">
					<view class="item" v-for="item in list" :key='item.id' @click="toInfo(item.url)">
						<image :src="item.img" mode="widthFix"></image>
						<text>{{item.text}}</text>
					</view>
				</div>
				<div class="infoitem" v-if="roles == 'shop'">
					<view class="item" v-for="item in newList" :key='item.id' @click="toInfo(item.url)">
						<image :src="item.img" mode="widthFix"></image>
						<text>{{item.text}}</text>
					</view>
				</div>
				<div class="infoitem" v-if="roles == 'staff'">
					<view class="item" @click="navTo('/pages/agent/user/orderList')">
						<image src="../../static/img/agent/order.png" mode="widthFix"></image>
						<text>全部订单</text>
					</view>
				</div>
			</view>

			<view class="battery u-p-l-20 u-p-r-20" :class="myList.length>6?'battery_scroll':''">
				<view class="my">
					<div class="index-title">
						<span></span>
						<p>我的浮板</p>
						<text class="num">（当前<text>{{battery}}</text>使用）</text>
					</div>
					<div class="gengduo" @click="toMyBattery">
						<p>查看更多</p>
						<image src="/static/img/agent/arrow.png" mode=""></image>
					</div>
				</view>
				<scroll-view scroll-y="true" class="content" v-if="myList.length != 0" @scrolltolower="loadMore">
					<view class="batt" v-for="(item,index) in myList" :key="index" @click.stop="toBatteryDetail(item.code)">
						<p class="bianhao">编号：{{item.code}}</p>
						<div class="myinfo">
							<view class="money">
								总收入
								<text>￥{{item.total_fee}}</text>
							</view>
							<view>
								<text class="use">{{item.item_ky}}使用</text>/
								<text>共{{item.item_zs}}电池</text>
							</view>
						</div>
						<div class="shebei">
							<image class="batimg" src="/static/img/agent/battery.png" mode="widthFix"></image>
							<div class="sbright">
								<view class="name">
									<p>{{item.name}}</p>
									<div class="zaixian" v-if="item.state_text === '在线'">
										<image src="/static/img/agent/status.png" mode=""></image>
										<span>{{item.state_text}}</span>
									</div>
									<div class="lixian" v-if="item.state_text === '掉线'">
										<image src="/static/img/agent/lixian.png" mode=""></image>
										<span>{{item.state_text}}</span>
									</div>
								</view>
								<div class="xinxi">
									<span>心跳时间：{{item.heartbeat_time}}</span>
									<span>地址：{{item.address}}</span>
								</div>
								<view class="u-flex">
									<view class="u-btn" @click.stop="openVol(item)">
										音量控制
									</view>
									<view class="u-btn" @click.stop="caoZuoDevice(item.device_id)">
										操作设备
									</view>
									<view class="u-btn" @click.stop="operateOrBuy(item, 'operate')">
										直接使用
									</view>
									<view class="u-btn" @click.stop="operateOrBuy(item, 'buy')">
										购买套餐
									</view>
								</view>
							</div>
						</div>
					</view>
				</scroll-view>
				<view class="content" v-else>
					<view class="empty">
						暂无明细
					</view>
				</view>
			</view>
			<view class="huizongBaobiao u-p-t-20  u-p-b-20  u-p-l-30  u-p-r-30">
				<div class="index-title">
					<span></span>
					<p>月收入增长曲线</p>
				</div>
				<view class="huizongModdile u-flex u-row-left u-col-top u-flex-col u-m-t-12">
					<view class="charts-box">
						<qiun-data-charts
							type="column"
							:chartData="chartsDataColumn3"
							:canvas2d="true"
							canvasId="componentsinit"
							:echartsH5="true"
							:echartsApp="false"
						/>
					</view>
				</view>
			</view>
		</view>
		<!-- 音量控制 -->
		<view class="popupWray" v-if="showPopup">
			<view class="popupBox">
				<view class="closeBox" @click="closePopup">
					<image src="../../static/image/icon_close.png"></image>
				</view>
				<view class="btnBox">
					<view style="font-size: 36upx;margin-bottom: 20upx;">{{"设备编号:"+dev_item.code}}</view>
					<input style="font-size: 36upx;" type="number" max="30" min="0" placeholder="请输入音量" v-model="vol_num" />
					<button @click="changeVol()">提交</button>
				</view>
			</view>
		</view>
		<!-- 直接使用、购买套餐 -->
		<view class="useOrBuy" v-if="useOrBuyPopup">
			<view class="useOrBuyBox">
				<view class="closeBox" @click="closeuseOrBuyPopup">
					<image src="../../static/image/guanbi.png"></image>
				</view>
				<div class="box-content">
					<p class="title">{{operType === 'operate' ? '直接使用设备' : '购买设备'}}</p>
					<image class="erweima" :src="erweima" mode=""></image>
					<span class="saoma">扫码识别二维码</span>
					<span class="shuoming">{{operType === 'operate' ? '使用说明：请使用微信进行扫码，扫码当天可以使用。' : '使用说明：扫描上方二维码，进行套餐购买'}} </span>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
import {agentBattery,accountIndex,getUserInfo, openDevice, indexData, changeVol} from '../../api/api.js'
export default {
	data() {
		return {
			list: [
				{
					id: 1,
					img: '/static/img/agent/money.png',
					text: '总收入',
					url: '/pages/agent/index/income'
				},
				{
					id: 2,
					img: '/static/img/agent/use.png',
					text: '使用记录',
					url: '/pages/agent/index/record'
				},
				{
					id: 3,
					img: '/static/img/agent/day.png',
					text: '日报表',
					url: '/pages/agent/index/day'
				},
				{
					id: 4,
					img: '/static/img/agent/month.png',
					text: '月报表',
					url: '/pages/agent/index/month'
				},
				{
					id: 5,
					img: '/static/img/agent/order.png',
					text: '全部订单',
					url: '/pages/agent/user/orderList'
				},
				{
					id: 6,
					img: '/static/img/agent/mangent.png',
					text: '用户管理',
					url: '/pages/agent/user/operate-manage'
				},
				{
					id: 7,
					img: '/static/img/agent/dianchi.png',
					text: '电池管理',
					url: '/pages/agent/index/batteryManagement'
				},
				{
					id: 8,
					img: '/static/img/agent/tongji.png',
					text: '统计',
					url: '/pages/agent/statistics'
				}
			],
			battery: '',
			chartsDataColumn3:{},
			day_total: '',
			month_total: '',
			online: '',
			use_total: '',
			myList: [],
			total: 0,
			last_page: 1,
			current_page: 1,
			per_page: 5,
			column: {
				"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
				"series": [{
					"name": "月收入(元)",
					"data": [35, 36, 31, 33, 13, 34]
				}]
			},
			dataFrom:{},
			showPopup:false,
			vol_num:'',
			dev_item:{},
			isShowBlance: true,
			useOrBuyPopup: false,
			operType: '',
			erweima:'',
			roles: ''
		}
	},
	computed: {
		newList() {
			return this.list.filter(item => item.id !== 6 && item.id !== 7 && item.id !== 8);
		}
	},
	onLoad() {
		this.getuser();
		this.getinitData();
	},
	onShow() {
		this.getInfo();
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url: url
			})
		},
		toMyBattery() {
			uni.navigateTo({
				url:'/pages/agent/myBattery'
			})
		},
		openVol(item){
			this.showPopup = true;
			this.dev_item = item;
			this.vol_num = this.dev_item.vol;
		},
		changeVol(){
			changeVol({
				device_id: this.dev_item.id,
				vol: this.vol_num
			}).then(res => {
				if(res.code == 1){
					this.showPopup = false;
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
					this.vol_num = '';
				}
				return;
			})
		},
		closePopup(){
			this.showPopup = false;
		},
		operateOrBuy(item, type){
			this.operType = type;
			this.useOrBuyPopup = true;
			if (type === 'operate') {
				this.erweima = item.zj_qr_image;
			} else if(type === 'buy'){
				this.erweima = item.tc_qr_image;
			}
			console.log(item, 'iiitttee');
		},
		closeuseOrBuyPopup(){
			this.useOrBuyPopup = false;
		},
		// 代理
		toInfo(url) {
			uni.navigateTo({
				url: url
			})
		},
		getInfo(loadMore) {
			agentBattery().then(res => {
				if (loadMore) {
					console.log(loadMore)
					for (let i = 0; i < res.data.data.length; i++) {
						this.myList.push(res.data.data[i])
					}
				} else {
					this.myList = res.data.data
				}
				this.battery = res.data.curr_use
				this.total = res.data.total
				this.last_page = res.data.last_page
				// this.current_page = res.data.current_page
				// this.myList = res.data.data
			})
		},
		getuser(){
			getUserInfo().then(res=>{
				console.log(res,'rrrrreeeee')
				this.roles = res.data.dl_roles;
				if(res.data.is_agent == 0){
					uni.showModal({
						title: '提示',
						content: '暂无权限',
						showCancel: false,
						success: function(res) {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					})
				}
			})
		},
		loadMore(e) {
			// console.log(e)
			if (this.current_page < this.last_page) {
				this.current_page += 1
				this.getInfo('loadMore')
			}
		},
		toBatteryDetail(id) {
			uni.navigateTo({
				url: '/pages/agent/index/detail?id=' + id
			})
		},
		caoZuoDevice(id){
			uni.navigateTo({
				url: '/pages/agent/index/battery?device_id=' + id
			})
		},
		getinitData(){
			indexData().then(res=>{
				console.log(res)
				if(res.code == 1){
					this.dataFrom = res.data;
					console.log(this.dataFrom, 'dataFromdataFrom');
					this.column.categories = this.dataFrom.categories;
					this.column.series[0].data =  this.dataFrom.series_data;
					this.getServerData();
				}
			})
		},
		getServerData() {
			//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
			//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
			console.log("===this.column",this.column)
			let tmpColumn3=JSON.parse(JSON.stringify(this.column));
			//series.linearGradient代表渐变色：
			//前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始；
			//第5个参数为数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
			tmpColumn3.series[0].linearGradient=[0, 0, 0, 1,[{offset: 0, color: '#0EE2F8'},{offset: 1, color: '#1890FF'}]];
			console.log("===tmpColumn3",tmpColumn3)
			this.chartsDataColumn3=tmpColumn3;
		},
		complete(e) {
			console.log("渲染完成事件",e);
		},
		getIndex(e){
			console.log("获取点击索引事件",e);
		},
	},
}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
		overflow-y: scroll;
	}

	.agent {
		width: 100%;
		height: 100%;
		.agent-top{
			width: 100%;
			height: 178px;
			background: url('../../static/img/agent/topbg.png') no-repeat center;
			background-size: 100% 100%;
			position: relative;
			.account-price{
				width: 70%;
			}
			.blance{
				display: flex;
				justify-content: center;
				color: #fff;
				padding-top: 20px;
				.price-t{
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 10px;
					image{
						width: 16px;
						height: 6px;
						margin-left: 5px;
					}
				}
				.price-b{
					text-align: center;
					font-size: 24px;
					font-weight: bold;
				}
			}
			.caozuo{
				position: absolute;
				right: 20px;
				top: 20px;
				color: #fff;
				image{
					width: 6px;
					height: 12px;
				}
				.liushui{
					width: 87px;
					height: 24px;
					border-radius: 12px;
					border: 1px solid #FFFFFF;
					display: flex;
					align-items: center;
					margin-bottom: 10px;
					p{
						text-align: center;
						margin: 0 5px 0 10px;
					}
				}
				.yuer{
					width: 87px;
					height: 24px;
					border-radius: 12px;
					border: 1px solid #FFFFFF;
					display: flex;
					align-items: center;
					p{
						text-align: center;
						margin: 0 5px 0 10px;
					}
				}
			}
			.shouru{
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: center;
				color: #fff;
				width: 88%;
				margin: 20px auto;
				p{
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 22px;
					color: #FFFFFF;
				}
				span{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 14px;
					color: #FFFFFF;
				}
			}
		}
		
		.index-title{
			display: flex;
			align-items: center;
			padding: 14px 0 14px 12px;
			span{
				width: 5px;
				height: 15px;
				background: #49A1FD;
				border-radius: 3px;
				display: block;
				margin-right: 6px;
			}
			p{
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 16px;
				color: #000000;
			}
		}
		
		.info {
			width: 100%;
			// height: 230upx;
			background-color: #FFFFFF;
			margin-top: 15px;
			.infoitem{
				display: flex;
				// justify-content: space-around;
				align-items: center;
				flex-wrap: wrap;
				padding-bottom: 15px;
			}
			.item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 15px;
				image {
					width: 32px;
					height: 32px;
					margin-bottom: 20upx;
				}

				text {
					font-size: 24upx;
				}
			}
		}
		.battery {
			width: 100%;
			height: auto;
			background-color: #FFFFFF;
			margin-top: 16px;
			overflow: hidden;
			padding-bottom: 20px;
			.my {
				width: calc(100%);
				height: 100upx;
				margin: 0 auto;
				display: flex;
				font-size: 28upx;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1upx solid #F3F3F3;

				.num {
					color: #000000;
					font-size: 14px;
					font-weight: 800;
					text {
						color: #49A1FD;
					}
				}
				.gengduo{
					display: flex;
					align-items: center;
					p{
						font-weight: 400;
						font-size: 12px;
						color: #49A1FD;
					}
					image{
						width: 12px;
						height: 12px;
					}
				}
			}

			.content {
				width: calc(100%);
				height: calc(100% - 80upx);
				margin: 0 auto;

				.batt {
					width: 100%;
					// height: 180upx;
					border-bottom: 1upx solid #e9e6e9;
					padding: 15px 0;
					.bianhao{
						font-weight: 800;
						font-size: 15px;
						color: #000000;
						line-height: 30px;
					}
					.myinfo{
						display: flex;
						justify-content: space-between;
						margin-bottom: 10px;
						font-size: 13px;
						.money {
							color: #999999;
							text {
								color: #fb817f;
							}
						}
						.use {
							color: #fb817f;
						}
					}
					.shebei{
						display: flex;
						justify-content: flex-start;
						.batimg {
							width: 60px;
							margin-right: 20upx;
						}
						.name{
							display: flex;
							align-items: center;
							p{
								font-weight: 500;
								font-size: 15px;
								color: #000000;
								margin-right: 10px;
								line-height: 30px;
							}
							.zaixian{
								display: flex;
								align-items: center;
								width: 54px;
								height: 18px;
								line-height: 18px;
								background: #E6FFE0;
								border-radius: 100px;
								image{
									width: 12px;
									height: 12px;
									display: block;
									margin-left: 6px;
								}
								span{
									font-weight: 400;
									font-size: 11px;
									color: #4AB92F;
									display: block;
									margin-left: 5px;
								}
							}
							.lixian{
								display: flex;
								align-items: center;
								width: 54px;
								height: 18px;
								line-height: 18px;
								background: #FFE7E7;
								border-radius: 100px;
								image{
									width: 12px;
									height: 12px;
									display: block;
									margin-left: 6px;
								}
								span{
									font-weight: 400;
									font-size: 11px;
									color: #FB2525;
									display: block;
									margin-left: 5px;
								}
							}
						}
						.xinxi{
							margin-bottom:10px;
							width: 250px;
							span{
								font-weight: 400;
								font-size: 12px;
								color: #737373;
								line-height: 26px;
								display: block;
							}
						}
					}
				}

				.empty {
					height: 100upx;
					text-align: center;
					line-height: 100upx;
				}
			}
		}
		.battery_scroll{
			height: calc(100% - 280upx);
		}
	}
	@media screen and (min-width:800px){
		.agent .info .item image{
			width: 60px;
		}
	}
	.u-btn{
		border: 2rpx solid #3eb9fe;
		padding: 8rpx 12rpx;
		border-radius: 20rpx;
		color: #3eb9fe;
		margin-bottom: 10rpx;
		display: flex;
		justify-content: center;
		font-size: 26rpx;
		margin-right: 12px;
	}
	.u-btn:nth-child(4) {
		margin-right: 0 !important;
	}
	.huizong{
		margin: 20rpx 20rpx;
		border-radius: 30rpx;
		background: #fff;
		min-height: 400rpx;
		.huizongTop{
			height: 60rpx;
			.huizongTitle{
				font-size: 36rpx;
				font-weight: bold;
			}
		}
		.huizongModdile{
			width: 100%;
			.shouRu{
				width: 100%;
				color: #666666;
			}
			.money{
				width: 100%;
				color: #F36B72;
				font-size: 48rpx;
				font-weight: bold;
			}
			.orderNum{
				padding: 4rpx 14rpx;
				border-radius: 20rpx;
				background: #5897FF;
				color: #fff;
				
			}
		}
		.huizongBottom{
			width: 100%;
			padding-bottom: 20rpx;
			.huizongBottomItem{
				width: 50%;
				.shouRu{
					width: 100%;
					color: #666666;
				}
				.money{
					width: 100%;
					color: #333;
					font-size: 38rpx;
					font-weight: bold;
				}
				.orderNum{
					padding: 4rpx 14rpx;
					border-radius: 20rpx;
					background: #5897FF;
					color: #fff;
					
				}
			}
		}
	}
	
	.huizongBaobiao{
		margin-top: 15px;
		background: #fff;
		min-height: 600rpx;
		.huizongTop{
			height: 60rpx;
			.huizongTitle{
				font-size: 36rpx;
				font-weight: bold;
			}
		}
		.huizongModdile{
			.charts-box {
				width: 100%;
				height: 300px;
			}
		}
	}
	
	.popupWray{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.5);
		.popupBox{
			width: 80%;
			position: relative;
			left: 50%;
			top: 50%;
			background: #fff;
			border-radius: 10upx;
			overflow: hidden;
			transform: translate(-50%,-50%);
			.closeBox{
				width: 80upx;
				height: 80upx;
				position: absolute;
				right: 0;
				top: 0;
				background: #f3f4f6;
				border-bottom-left-radius: 50%;
				
				// width: 50upx;
				// height: 50upx;
				// position: absolute;
				// right: -4upx;
				// top: -4upx;
				>image{
					width: 100%;
					height: 100%;
				}
			}
			input {
				height: 80upx;
				border-bottom: 1upx solid #f7f7f7;
			}
			.btnBox{
				padding: 110upx 50upx;
				>button{
					margin-top: 60upx;
					border-radius: 45upx;
					background: #45bafd;
					color: #fff;
				}
			}
		}
	}
	
	.useOrBuy{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.5);
		.useOrBuyBox{
			width: 290px;
			height: 430px;
			background: url('../../static/img/agent/shebeitc.png') no-repeat center;
			background-size: 100% 100%;
			position: relative;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			.closeBox{
				width: 30px;
				height: 30px;
				position: absolute;
				left: 45%;
				bottom: -50px;
				z-index: 99999;
				>image{
					width: 100%;
					height: 100%;
				}
			}
			.box-content{
				.title{
					font-weight: 500;
					font-size: 22px;
					color: #FFFFFF;
					text-align: center;
					padding-top: 15px;
				}
				.erweima{
					width: 200px;
					height: 200px;
					display: block;
					margin: 60px auto 10px auto;
					border: 7px solid #2F9AFE;
					border-radius: 6px;
				}
				.saoma{
					font-weight: 400;
					font-size: 14px;
					color: #444444;
					text-align: center;
					display: block;
				}
				.shuoming{
					font-weight: 400;
					font-size: 14px;
					color: #444444;
					display: block;
					padding: 15px;
				}
			}
		}
	}
	
	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 99;
		background: rgba($color: #000000, $alpha: 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		
		.pay {
			width: 580upx;
			height: 340upx;
			padding: 10upx 30upx;
			background: #FFFFFF;
			border-radius: 12px;
			position: relative;
			
			image {
				width: 30upx;
				height: 30upx;
				position: absolute;
				top: 20upx;
				left: 30upx;
			}
			
			.tit {
				width: 100%;
				text-align: center;
				margin: 50upx auto 30upx;
			}
			
			.con {
				width: 100%;
				text-align: center;
			}
			
			.btn {
				margin-top: 45upx;
				display: flex;
				
				button {
					width: 200upx;
					height: 88upx;
					background: #FFFFFF;
					border-radius: 44upx;
					border: 1upx solid #f2f2f2;
					color: #666666;
				}
				
				.sub {
					width: 200upx;
					height: 88upx;
					background: #3EB9FF;
					border-radius: 44upx;
					color: #FFFFFF;
				}
				
			}
		}
	}
</style>